<template>
	<view class="pvcamera">
		<!-- 镜头 -->
		<camera class="pvcamera-camera" :device-position="shexiangtou_type"  flash="auto"></camera>
		<!-- 已拍列表 -->
		<view class="pub datalists" v-if="paishe_type=='photo'">
			<view class="imglistclass" v-for="(it,index) in photolist" @click="tc_openandclose('tc_photo',index)">
				<image :src="it" mode="aspectFit"></image>
			</view>
		</view>
		<view class="pub datalists" v-if="paishe_type=='video'">
			<view class="imglistclass" v-for="(it,index) in videolist" @click="tc_openandclose('tc_video',index)">
				<image :src="it.thumb" mode="aspectFit"></image>
			</view>
		</view>
		<!-- 切换 -->
		<view class="pub" >
			<view :class="seleted_pz" @click="seleted_pzorsp('photo')">拍照</view>
			<view :class="seleted_sp" @click="seleted_pzorsp('video')">视频</view>
		</view>
		
		<!-- 视频显示时间 -->
		<view class="pub" v-if="paishe_type=='video'">
			<text>00:</text>
			<text v-if="timingSum < 10">0</text>
			<text>
				{{ timingSum }}
			</text>
		</view>
		
		<!-- 操作按钮 -->
		<view class="pub tanxinghezi">
			
			<!-- 反转相机 -->
			<view class="pub txhz-z" @click="fanzhuanxiangji()">
				<image src="/static/img/fanzhuanxiangji.png"  class="pvcamera-button" mode="aspectFit"></image>
			</view>
			
			<!-- 拍摄按钮 -->
			<view  class="txhz-z">
				<view v-if="paishe_type=='photo'" class="pub" @click="takePhoto">
					<image src="/static/img/paishe_off.png" class="pvcamera-button"  mode="aspectFit"></image>
				</view>
				<view class="pub" v-if="paishe_type=='video'" @longpress="startShootVideo()" @touchstart="handleTouchStart()" @touchend="handleTouchEnd()">
					<image src="/static/img/paishe_on.png"  class="pvcamera-button" mode="aspectFit"></image>
				</view>
			</view>
			<!-- 提交按钮 -->
			<view  class="pub txhz-z" >
				<image src="/static/img/tijiao_ty.png"  class="pvcamera-button" mode="aspectFit" @click="tijiaoasdfasd()"></image>
			</view>
		</view>
		
		<!-- 图片弹窗 -->
		<view v-show="tc_photo" class="tc_photo">
			<view class="tc_openandclose" @click="tc_openandclose('tc_photo')">关闭</view>
			<view class="tc_shanchu"><image src="/static/img/shanchu.png" mode="aspectFit" @click="shanchu_photo()"></image></view>
			<swiper class="swiper" circular :indicator-dots="indicatorDots" @change="swiper_phpto_change" :current="current_photo" indicator-dots="true" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="it in photolist">
					<image :src="it" mode="aspectFit" class="w_h_100"></image>
					
				</swiper-item>
			</swiper>
		</view>
		<!-- 视频弹窗 -->
		<view v-show="tc_video"  class="tc_video">
			<view class="tc_openandclose" @click="tc_openandclose('tc_video')">关闭</view>
			<view class="tc_shanchu"><image src="/static/img/shanchu.png" mode="aspectFit" @click="shanchu_video()"></image></view>
			<swiper class="swiper" circular :indicator-dots="indicatorDots" @change="swiper_video_change" :current="current_video" indicator-dots="true" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="it in videolist">
					<video class="w_100_h_90" id="myVideo" :src="it.src" @error="videoErrorCallback" ></video>
					
				</swiper-item>
			</swiper>
		</view>
		<view class="zhezhao" v-show="zhezhao_status"></view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				video_fileid:0,
				photo_fileid:0,
				
				submitapi:'https://............',//附件id保存地址
				uploadUrl:'https://............',//视频图片附件上传地址
				
				
				paishe_type:'photo',
				seleted_pz:"seleted-pzorsp-on",
				seleted_sp:"seleted-pzorsp-off",
				
				duration:800,
				
				photo_sum:0,
				photolist:[],
				del_photolist:[],
				shexiangtou_type:'back',
				current_photo:0,
				dq_phpto_current:0,
				
				video_sum:0,
				videolist:[],
				del_videolist:[],
				showTime:false,
				timingSum:0,
				endTime:0,
				startTime:0,
				timing:0,
				current_video:0,
				dq_video_current:0,
				
				tc_photo:false,
				tc_video:false,
				
				zhezhao_status:false,
				
				isLX: false,
				buttonNumber:"",
				ctx:uni.createCameraContext(),
			}
		},
		created() {
			uni.authorize({
			    scope: 'scope.record',
			    success() {
			    }
			})
		},
		methods: {
			tijiaoasdfasd(){
				uni.request({
					url: this.submitapi,
					data: {'photo_fileid':this.photo_fileid,'video_fileid':this.video_fileid},
					method:'post',
					success: (res) => {
						console.log(res);
						if(res.data.status==1){
							uni.showToast({
							    title:res.data.msg,
								icon:'none',
							    duration: 2000,
								
							});
						}else if(res.data.status==2){
							uni.showToast({
							    title:res.data.msg,
								icon:'none',
							    duration: 2000,
								
							});
						}else{
							uni.showToast({
							    title:res.data.msg,
								icon:'none',
							    duration: 2000,
							});
						}
					}
				});
			},
			swiper_phpto_change(event){
				console.log(event.detail.current);
				console.log(this.current_photo);
				this.dq_phpto_current=event.detail.current;
				console.log(this.dq_phpto_current);
				
				//通过这个id 进行删除,还可以通过这个id设置从第几个图打开弹窗
			},
			swiper_video_change(event){
				console.log(event.detail.current);
				console.log(this.current_video);
				this.dq_video_current=event.detail.current;
				console.log(this.dq_video_current);
				
				//通过这个id 进行删除,还可以通过这个id设置从第几个图打开弹窗
			},
			shanchu_photo(){
				var that=this;
				console.log('执行删除');
				console.log(that.photolist);
				console.log(that.dq_phpto_current);
				
				that.photolist = that.photolist.filter(function(item) {
				  return item !== that.photolist[that.dq_phpto_current];
				});
			
				that.photo_sum=that.photo_sum-1;
				if((that.photo_sum-1) < that.dq_phpto_current){
					console.log('photo_sum:');
					console.log(that.photo_sum);
					that.dq_phpto_current=0;
				}
				
				console.log(that.photo_sum);
				console.log(that.del_photolist);
			},
			shanchu_video(){
				var that=this;
				console.log('执行删除');
				console.log(that.videolist);
				console.log(that.dq_video_current);
				
				that.videolist = that.videolist.filter(function(item,index) {
				  return item !== that.videolist[that.dq_video_current];
				});
				
				that.video_sum=that.video_sum-1;
				if((that.video_sum-1) < that.dq_video_current){
					console.log('video_sum:');
					console.log(that.video_sum);
					that.dq_video_current=0;
				}
				console.log(that.video_sum);
				console.log(that.del_videolist);
			},
			
			fanzhuanxiangji(){
				if(this.shexiangtou_type=='back'){
					this.shexiangtou_type='front';
				}else{
					this.shexiangtou_type='back';
				}
			},
			tc_openandclose(type,index){
				if(type=='tc_photo'){
					this.current_photo=index;
					this.tc_photo=!this.tc_photo;
					this.zhezhao_status=this.tc_photo;
				}else if(type=='tc_video'){
					this.current_video=index;
					this.tc_video=!this.tc_video;
					this.zhezhao_status=this.tc_video;
				}
			},
			
			seleted_pzorsp(type){
				if(type=='video'){
					this.paishe_type='video';
					this.seleted_pz='seleted-pzorsp-off';
					this.seleted_sp='seleted-pzorsp-on';
				}else if(type=='photo'){
					this.paishe_type='photo';
					this.seleted_pz='seleted-pzorsp-on';
					this.seleted_sp='seleted-pzorsp-off';
				}
			},
			takePhoto() {
				var that=this;
				if (that.photo_sum == 5) {
					// 只能拍5张照片
					uni.showToast({
					    title: '只能添加5张照片',
						icon:'none',
					    duration: 2000,
					
					});
					return;
				}
				const ctx_photo = uni.createCameraContext();
				ctx_photo.takePhoto({
					quality: 'normal', // 成像质量 high-高质量  normal-普通质量  low-低质量  original-原图
					success: res => {
						uni.showLoading({
							title: '图片处理中'
						});
						/* console.log("========= 调用 ===========",res)
						console.log("========= 调用 ===========",that.photolist) */
						// res.tempImagePath 拍摄的照片地址
						that.photolist.push(res.tempImagePath);
						that.photo_sum++;
						
						uni.uploadFile({
							url: that.uploadUrl,
							filePath: res.tempImagePath,
							name: 'file',
							formData:{
								
							},
							success: (res) => {
								console.log(res);
								const resdata= JSON.parse(res.data);
								if(that.photo_fileid == 0){
									that.photo_fileid=resdata.fileid;
								}else{
									that.photo_fileid=that.photo_fileid + ',' + resdata.fileid;
								}
								console.log(that.photo_fileid);
							},
							fail: (uploadFileErr) => {
								console.log(uploadFileErr);
							},
							
						});
						uni.hideLoading();
					}
				});
			},
			
			// 开始录像
			startShootVideo() {
				if (this.video_sum == 5) {
					// 只能拍5张照片
					uni.showToast({
					    title: '只能添加5个视频',
						icon:'none',
					    duration: 2000,
						
					});
					return false;
				}
				this.ctx.startRecord({
					success: res => {
						this.videoShow = true;
						this.showTime = true;
						uni.hideLoading();
						// 计时
						this.timing = setInterval(() => {
							this.timingSum++;
						}, 1000);
					},
					fail() {
						uni.hideLoading();
					}
				});
			},
			// 结束录像
			stopShootVideo(e) {
				var that=this;
				if (that.timing) {
					clearInterval(that.timing);
				}
				that.videoShow = false;
				uni.showLoading({
					title: '正在处理中'
				});
				that.ctx.stopRecord({
					success: res => {
						console.log(res);
						that.videolist.push({'thumb':res.tempThumbPath,'src':res.tempVideoPath});
						that.timingSum = 0;
						that.video_sum++;
						that.showTime = false;
					
						
						uni.uploadFile({
							url: that.uploadUrl,
							filePath: res.tempVideoPath,
							name: 'file',
							formData:{
								
							},
							success: (res) => {
								console.log(res);
								const resdata= JSON.parse(res.data);
								if(that.video_fileid == 0){
									that.video_fileid=resdata.fileid;
								}else{
									that.video_fileid=that.video_fileid + ',' + resdata.fileid;
								}
								console.log(that.video_fileid);
							},
							fail: (uploadFileErr) => {
								console.log(uploadFileErr);
							},
							
						});
						uni.hideLoading();
					},
					fail : res=>{
						console.log(res);
					}
				})
			},
			
			handleTouchStart(e) {
				this.startTime = 0;
			},
			//手指触摸结束
			handleTouchEnd(e) {
				this.endTouch = false;
				if (this.timing) {
					clearInterval(this.timing);
				}
				this.videoShow = false;
				this.endTime = this.timing;
				//判断是点击还是长按，长按 触发结束录像
				if (this.endTime - this.startTime > 350) {
					if (this.timingSum < 5) {
						this.ctx.stopRecord({
							success: res => {
								uni.showToast({
									title: '录制时间过短',
									icon: 'none'
								});
							},
							fail() {}
						});
						this.timingSum = 0;
					} else {
						this.stopShootVideo();
					}
				}
			}
		}
	}
</script>

<style>
	.pvcamera {
		position: fixed;
		height: 100%;
		width: 100%;
		z-index: 10000000;
	}
	.seleted-pzorsp-on{
		margin: 10px;
		border-bottom:4rpx solid firebrick;
		color: firebrick;
	}
	.seleted-pzorsp-off{
		margin: 10px;
		color: #a3a3a3;
	}
	.pvcamera-camera {
		margin: 10rpx auto;
		height: 60%;
		width: 90%;
		z-index: 1;
	}

	.pvcamera-button {
		height: 68px;
		width: 68px;
		z-index: 2;
		margin: 30rpx auto;
		text-align: center;
		line-height: 100px;
		font-size: 30px;
	}
	
	.tc_photo{
		width: 86%;
		height: 80%;
		position: fixed;
		top:5%;
		left:7%;
		z-index: 99;
		background: #6c6c6c;
		border: 6rpx solid #d0d0d0;
	}
	.tc_video{
		width: 86%;
		height: 80%;
		position: fixed;
		top:5%;
		left:7%;
		z-index: 99;
		background: #6c6c6c;
		border: 6rpx solid #d0d0d0;
	}
	.swiper{
		position: relative;
		width: 100%;
		height: 100%;
	}
	.pub{
		display:flex;
		justify-content: center;
	}
	.imglistclass{
		position: relative;
		width: 100rpx;
		height: 100rpx;
		border: 2rpx solid #ccc;
		margin: 0 10px;
		
	}
	.imglistclass image{
		width: 100%;
		height: 100%;
	}
	
	
	.tanxinghezi{
		display: flex;
		align-items: center; /* 垂直居中 */
		justify-content: center;
	}
	.txhz-z{
		margin:0 40rpx;
	}
	.fzxj{
		width: 60rpx;
		height: 60rpx;
	}
	.tijiaobtn{
		width: 100rpx;
		height: 60rpx;
		border:4rpx solid firebrick;
		color: firebrick;
		border-radius:10rpx;
		line-height: 60rpx;
		text-align: center;
	}
	.datalists{
		background: #d0d0d0;
		height: 120rpx;
		padding: 10rpx;
		width: 90%;
		margin: 0 auto;
	}
	.zhezhao{
		width: 100%;
		height: 100%;
		z-index: 98;
		position: fixed;
		top: 0;
		left: 0;
		background:rgba(0, 0, 0, 0.8) ;
	}
	.tc_shanchu{
		
		position: absolute;
		left:2%;top:2%;
		font-size: 30px;
		z-index: 990;
		background: firebrick;
		border-radius: 10px;
		text-align: center;
		width: 30px;
		height: 30px;
		
		
	}
	.tc_shanchu image{
		width:56rpx;
		height:56rpx;
		z-index: 999;
	}
	.tc_openandclose{
		width: 50px;
		height: 30px;
		border-radius: 10px;
		background:firebrick;
		color: aliceblue;
		text-align: center;
		line-height: 30px;
		position: absolute;
		right:2%;
		top:2%;
		z-index: 999;
	}
	.w_h_100{
		width: 100%;
		height: 100%;
	}
	.w_100_h_90{
		width: 100%;
		height: 90%;
	}
</style>